<template>
    <div class="usedcar">
        <div class="header">
            <div class="shortcut">
                <div class="left">
                    <span>19:50</span>
                </div>
                <div class="right">
                    <span class="iconfont icon-shengyinjingyin"></span>
                    <span class="iconfont icon-wifi"></span>
                    <span class="iconfont icon-dianliang"></span>
                </div>
            </div>
            <div class="search">
                <div class="left">
                    泰安
                    <span class="iconfont icon-gonggong-xialajiantou"></span>
                </div>
                <div class="right">
                    <span class="iconfont icon-sousuo"></span>
                    <span>品牌车系 | 商家名称</span>
                </div>
            </div>
        </div>
        <div class="sales">
            <ul>
                <li>
                    <img src="@/assets/img/usedcar/买.png" alt="">
                    <span>买二手车</span>
                </li>
                <li>
                    <img src="@/assets/img/usedcar/卖.png" alt="">
                    <span>我要卖车</span>
                </li>
                <li>
                    <img src="@/assets/img/usedcar/找.png" alt="">
                    <span>帮我找车</span>
                </li>
                <li>
                    <img src="@/assets/img/usedcar/换.png" alt="">
                    <span>置换</span>
                </li>
                <li>
                    <img src="@/assets/img/usedcar/值.png" alt="">
                    <span>免费估值</span>
                </li>
            </ul>
        </div>
        <div class="brand">
            <ul class="logo">
                <li>
                    <img src="@/assets/img/usedcar/大众.png" alt="">
                    <span>大众</span>
                </li>
                <li>
                    <img src="@/assets/img/usedcar/本田.png" alt="">
                    <span>本田</span>
                </li>
                <li>
                    <img src="@/assets/img/usedcar/奥迪.png" alt="">
                    <span>奥迪</span>
                </li>
                <li>
                    <img src="@/assets/img/usedcar/别克.png" alt="">
                    <span>别克</span>
                </li>
                <li>
                    <img src="@/assets/img/usedcar/哈弗.png" alt="">
                    <span>哈弗</span>
                </li>
            </ul>
            <ul class="logo">
                <li>
                    <img src="@/assets/img/usedcar/现代.png" alt="">
                    <span>现代</span>
                </li>
                <li>
                    <img src="@/assets/img/usedcar/丰田.png" alt="">
                    <span>丰田</span>
                </li>
                <li>
                    <img src="@/assets/img/usedcar/奔驰.png" alt="">
                    <span>奔驰</span>
                </li>
                <li>
                    <img src="@/assets/img/usedcar/雪佛兰.png" alt="">
                    <span>雪佛兰</span>
                </li>
                <li>
                    <img src="@/assets/img/usedcar/更多.png" alt="">
                    <span>更多</span>
                </li>
            </ul>
            <ul class="price-type">
                <li>3万以内</li>
                <li>3-5万</li>
                <li>5-8万</li>
                <li>8-15万</li>
                <li>15-20万</li>
            </ul>
            <ul class="price-type">
                <li>SUV</li>
                <li>准新车</li>
                <li>练手车</li>
                <li>城市代步</li>
                <li>更多</li>
            </ul>
        </div>
        <div class="prefecture">
            <div class="dream-car">
                <h3>豪车驾到</h3>
                <span>你心中的Dream car</span>
                <img src="@/assets/img/usedcar/3.png" alt="">
            </div>
            <div class="fixed">
                <h3>一口价</h3>
                <span>限时抢购</span>
                <img src="@/assets/img/usedcar/4.png" alt="">
            </div>
        </div>
        <div class="look">
            <img src="@/assets/img/usedcar/7.png" alt="">
            <img src="@/assets/img/usedcar/8.png" alt="">
        </div>
        
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
    .usedcar{
        width: 100%;
        height: 1000px;
        background-color: #F6F7FB;
        .header{
            width: 100%;
            height: 100px;
            background-color: #FFFF;
            .shortcut{
                display: flex;
                justify-content: space-between;
                padding-top: 20px;
                .left{
                    padding-left: 30px;
                }
                .right{
                    padding-right: 15px;
                }
            }
            .search{
                display: flex;
                margin-top: 15px;
                margin-left: 15px;
                .right{
                    width: 250px;
                    border: 2px solid #3F68C4;
                    margin-left: 20px;
                    border-radius: 10px;
                    line-height: 30px;
                    span{
                        padding-left: 10px;
                        color: #C4C4C6;
                    }
                }
            }
        }
        .sales{
            width: 370px;
            height: 100px;
            background-color: #FFFF;
            border-radius: 10px;
            margin-top: 15px;
            margin-left: 20px;
            ul{
                display: flex;
                li{
                    display: flex;
                    flex-direction: column;
                    margin-top: 15px;
                    margin-left: 23px;
                    img{
                        width: 40px;
                        height: 40px;
                    }
                    span{
                        font-size: 13px;
                        font-weight: 600;
                        text-align: center;
                        padding-top: 15px;
                    }
                }
            }
        }
        .brand{
            width: 370px;
            height: 310px;
            background-color: #FFFF;
            margin-top: 15px;
            margin-left: 20px;
            border-radius: 10px;
            .logo{
                display: flex;
                li{
                    display: flex;
                    flex-direction: column;
                    margin-top: 15px;
                    margin-left: 20px;
                    img{
                        width: 50px;
                        height: 40px;
                    }
                    span{
                        text-align: center;
                        padding-top: 10px;
                    }
                }
            }
            .price-type{
                display: flex;
                li{
                    width: 70px;
                    height: 50px;
                    background-color: #F2F5FE;
                    border-radius: 10px;
                    line-height: 50px;
                    text-align: center;
                    margin-top: 15px;
                    margin-left: 7px;
                    font-size: 14px;
                    font-weight: 600;
                }
            }
        }
        .prefecture{
            display: flex;
            width: 370px;
            margin-top: 10px;
            margin-left: 10px;
            border-radius: 10px;
            .dream-car{
                width: 187px;
                height: 150px;
                background-color: #FFFF;
                border-radius: 10px;
                margin-top: 15px;
                h3{
                    padding-top: 13px;
                    padding-left: 15px;
                }
                span{
                    padding-top: 15px;
                    padding-left: 15px;
                }
                img{
                    width: 100px;
                    height: 100px;
                    padding-left: 100px;
                }
            }
            .fixed{
                width: 187px;
                height: 150px;
                background-color: #FFFF;
                border-radius: 10px;
                margin-left: 10px;
                margin-top: 15px;
                h3{
                    padding-top: 13px;
                    padding-left: 15px;
                }
                span{
                    padding-top: 15px;
                    padding-left: 15px;
                }
                img{
                    width: 110px;
                    height: 100px;
                    padding-left: 90px;
                }
            }
        }
        .look{
            margin-top: 20px;
            margin-left:10px;
            display: flex;
            img{
                width: 200px;
                height: 200px;
            }
        }
    }
</style>